<template>
    <el-container id="data-management">
        <el-aside width="200px">
            <el-menu
                :default-active="defaultActive"
                class="el-menu-vertical-demo"
            >
                <el-menu-item
                    v-for="item in menulist"
                    :disabled="!item.show"
                    :index="item.name"
                    @click="
                        defaultActive = item.name;
                        store.changePunctuation('show', false);
                    "
                >
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <!-- <Mark v-if="defaultActive == 'point'"></Mark>
            <UavList v-if="defaultActive == 'plotting'"></UavList>
            <Stereoscopic v-if="defaultActive == 'stereoscopic'"></Stereoscopic> -->
            <UserList v-if="defaultActive == 'user'"></UserList>
            <ChangePassword
                v-if="defaultActive == 'changePassword'"
            ></ChangePassword>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { mainStore } from "../../store/index";
import { useRoute } from "vue-router";
import Mark from "./mark.vue";
import UavList from "./uavList.vue";
import Stereoscopic from "./stereoscopic.vue";
import UserList from "./user/index.vue";
import ChangePassword from "./user/changePassword.vue";
const store = mainStore();
const route = useRoute();
let menulist = [
    // {
    //     show: true,
    //     name: "point",
    //     title: "地图标点",
    // },
    // {
    //     show: true,
    //     name: "plotting",
    //     title: "地图标绘",
    // },
    // {
    //     show: true,
    //     name: "stereoscopic",
    //     title: "3D立体字",
    // },
    {
        show: true,
        name: "user",
        title: "用户管理",
    },
    {
        show: true,
        name: "changePassword",
        title: "修改密码",
    },
];
let defaultActive = ref("user");
onMounted(() => {});
</script>

<style lang="less">
#data-management {
    margin: 0;
    width: 100%;
    height: 100%;
    .el-container {
        height: 100% - 60px;
    }
    .is-disabled {
        display: none;
    }
}
</style>
